<template>
    <div class="course-info">
        <router-link :to="'/lesson/'+ index" class="course-link">
            <img class="course-img" :src="src" alt="">        
            <p class="course-name">{{ courseName }}</p>
            <p class="old-price">原价:{{oldPrice}}</p>
            <p class="new-price">优惠价:{{newPrice}}</p>
        </router-link>
    </div>
</template>
<script>
    export default{
        data(){
            return{

            }
        },
        props:['src','courseName','oldPrice','newPrice','to','index'],
    }
</script>
<style lang="scss">
    /*CourseInfo.vue*/
    /*使用该组件时需要清理浮动*/
    $basecolor:white;
    @import '../assets/css/function.scss';
    .course-info{
        font-family:'黑体';
        width:pxToRem(140px);
        background-color:$basecolor;
        padding:pxToRem(10px) pxToRem(10px) 0 pxToRem(10px);
        float:left;
        .course-link{
            color:#000;
            .course-img{
                width:pxToRem(140px);
            }
            .course-name{
                font-size:pxToRem(14px);
                position:relative;
            }
            .old-price{
                font-size:pxToRem(10px);
                position:relative;
                top:pxToRem(1px);
            }
            .new-price{
                font-size:pxToRem(10px);
                color:#f60;
                position:relative;
                top:pxToRem(-13px);
                left:pxToRem(-10px);
                text-align:right;
            }
        }
    }
</style>